
<template>
  <div class="my-home-page" :style="'padding-top:'+statusBarHeight+'px'" @touchstart='handletouchstart' @touchmove='handletouchmove' @touchend='handletouchend' @touchcancel='handletouchcancel'>   
    <div class="swiper"  :style="'top:'+statusBarHeight+'px'">
      <div class="indicator-box"  :style="'top:'+statusBarHeight+'px'">
        <div class="indicator-group" >
          <span v-for="(item,index) in imgUrls" :key="item" :class="{'active':current==index}" v-if="imgUrls.length>1"></span> 
        </div> 
      </div> 
      <swiper
        :indicator-dots="false"
        :autoplay="false"
        :interval="5000"
        :duration="100"
        :current="current" 
        @change="bindchange"
        :style="'height:100%;width:100%;'"
      >
        <block v-for="item in imgUrls" :key="item">
          <swiper-item class="swiper-img-box" >
            <div style="width:100%;height:100%;" :style="'transform:scale('+transformShow+')'">
              <image mode="aspectFill" :src="item.link" class="img"  :class="{'off-left':offLeft,'off-right':offRight}"/> 
            </div> 
            <div class="block-left" @click.stop="swiperClis('down')"></div> 
            <div class="block-right" @click.stop="swiperClis('up')"></div>  
          </swiper-item>   
        </block>  
      </swiper> 
    </div>
    <!--内容--> 
    <div class="content-box" >
      <div class="page-content"> 
        <div class="page-back" @click="goBack">
          <image  src="/static/image/hmoe-back.png" :class="{'page-back-transform':homePageSwitch }" class="img"/> 
        </div>
        <div class="basics-data">
          <div class="name">{{userInfo.nickname}}&nbsp;&nbsp;<span>{{userInfo.age}}</span></div>
          <div class="info-list " v-if="userInfo.industry">
            <image class="classroom-img " src="/static/image/home-classroom.png"></image>
            <span>{{userInfo.industry}}</span>  
          </div>
          <div class="info-list" v-if="userInfo.school">
            <image class="school-img " src="/static/image/home-school.png"></image>
            <span>{{userInfo.school}}</span>  
          </div>
          <!--<div class="info-list ">
            <image class="location-img " src="/static/image/home-location.png"></image>
            <span> 12 km</span>  
          </div>-->
        </div>

        <div class="introduce" v-if="userInfo.introduce"> {{userInfo.introduce}} </div>

        <div class="audio-book"> 
          <div class="title"><span v-if="totalNum>=0">{{totalNum}}</span>&nbsp;部喜欢的影·音·书</div>
          <div class="main-box">
            <scroll-view scroll-x  class="scroll-view "  style="width: 100%"> 
              <div class="prd-group" @click="jumpPage('./../../user-info/user-books/main?tabsId=1')">
                <p class="add"><i-icon type="add" size="50" color="#fff"/></p>
                <p class="info">添加影·音·书 </p>
              </div>
              <home-book  v-for="item in musicsArr" :title="item.name" :link="item.cover" type="musics" :key="item" @jumpLink="jumpHomeBook"></home-book> 
              <home-book width="112rpx" v-for="item in booksArr" :title="item.name" :link="item.cover" type="books" :key="item" @jumpLink="jumpHomeBook "></home-book> 
              <home-book width="112rpx"  v-for="item in moviesArr" :title="item.name" :link="item.cover" type="movies" :key="item" @jumpLink="jumpHomeBook"></home-book> 
            </scroll-view>
          </div>
          <div class=" btn-box">
            <div class="btn text-center"  @click="jumpPage('./../../user-info/edit-user-info/main')">编辑资料</div>
          </div>
        </div>  
        
      </div>
    </div> 

  </div>
</template>

<script>
let lastY = 0
let scaleY=1
const PULL_DEFAULT = -1 //默认
const PULL_LT_HEIGHT = 1 //下拉小于高度
const PULL_GT_HEIGHT = 2 //下拉大于高度
const PULL_REFRESHING = 0 //刷新中
let platform = 'ios', scale = 375 / wx.getSystemInfoSync().windowWidth * 2
import * as api from '@/utils/api' ;   
import homeBook from '@/components/home-book.vue' ;    
import userStore from './../../common/user/store' ;  
const app = getApp()  
export default { 
  onLoad(){    
    app.aldstat.sendEvent('个人主页'); // 事件名称规范: 不超过255个字符 
    this.statusBarHeight=wx.getStorageSync('systemInfo').statusBarHeight; 
  },
  onShow: function () {  
    let vm = this; 
    setTimeout(()=>{
      vm.homePageSwitch=true;
      setTimeout(()=>{
        vm.homePageSwitch=false;
      },500);
    },500); 
     
    if(userStore.state.userInfo.head_pic){
      this.userInfo=userStore.state.userInfo;
      this.imgUrls=userStore.state.userInfo.photo;
      this.booksArr=userStore.state.userInfo.Books?userStore.state.userInfo.Books:[];
      this.moviesArr=userStore.state.userInfo.Movies?userStore.state.userInfo.Movies:[];
      this.musicsArr=userStore.state.userInfo.Musics?userStore.state.userInfo.Musics:[];
      this.totalNum=this.booksArr.length+this.moviesArr.length+this.musicsArr.length
    }else{
      this.fetchInfo();
    }

  }, 
  components:{ 
    homeBook
  }, 
  created() {
    platform = wx.getSystemInfoSync().platform
    scale = wx.getSystemInfoSync().windowWidth / 375 * 2
  },
  data () {
    return {      
      scrollTop: 0,
      statusBarHeight:20,
      headHeight:wx.getStorageSync('headHeight'),
      headPadding:wx.getStorageSync('headPadding'), 
      userInfo:{},
      imgUrls: [],   
      booksArr:[],
      moviesArr:[],
      musicsArr:[],  
      totalNum:0,
      current:0, 
      offLeft:false,
      offRight:false,
      transformShow:'1,1',
      homePageSwitch:false,
    }
  },  
 
  methods: {   
    /**获取用户信息 */
    fetchInfo(){
      let vm = this;
      api.getUserDetail().then(res=>{
        if(res.data.code==300000){ 
          userStore.state.userInfo=res.data.data;
          vm.userInfo=res.data.data;
          vm.imgUrls=userStore.state.userInfo.photo;
        }
      })
    }, 
    jumpPage(url){ 
      wx.navigateTo({url}); 
    },
    goBack(){  
      wx.navigateBack({ delta: 1 });  
    },  
    //影音书
    jumpHomeBook(val){ 
      let url='';
      if(val=='musics'){
         url='./../../user-info/user-books/main?tabsId=1'
      }else if(val=='movies'){
         url='./../../user-info/user-books/main?tabsId=2'
      }else if(val=='books'){
         url='./../../user-info/user-books/main?tabsId=3'
      }
      wx.navigateTo({url});
    },
    //监听轮播图
    bindchange(e){  
      this.current=e.mp.detail.current; 
    },
    swiperClis(val){
      let vm = this;
      if(val=='down'){
        if(vm.current==0){
          vm.current=0;
          vm.offLeft=true;
          wx.vibrateShort();
          setTimeout(()=>{
            vm.offLeft=false;
          },200);
          console.log(vm.offLeft);
        }else{
          vm.current--;
        }
      }else{ 
        if(vm.current==vm.imgUrls.length-1){
          vm.current=vm.imgUrls.length-1;
          vm.offRight=true;
          wx.vibrateShort();
          setTimeout(()=>{
            vm.offRight=false;
          },200);
        }else{
          vm.current++;
        } 
      }
    },
        //页面触摸开始事件，必须在触摸开始方法中调用此方法
    handletouchstart: function(event) {
      lastY = event.touches[0].clientY; 
    },
    //页面触摸移动事件，必须在触摸开始方法中调用此方法
    handletouchmove: function(event) {
      
      let pageY = event.touches[0].pageY
      let clientY = event.touches[0].clientY 
      let offsetY = clientY - lastY 
      
      if (this.scrollTop > 0 || offsetY<0) return 
      lastY = event.touches[0].clientY 
      // console.log(offsetY);
      if(offsetY>10){ 
        if(scaleY>2){
          scaleY=2;
        }else{
          scaleY+=0.01;
        }
        console.log(scaleY);
        this.transformShow=scaleY+','+scaleY;  
      } 
    },
    //页面触摸结束事件，必须在触摸开始方法中调用此方法
    handletouchend: function(event) {
      console.log('触摸结束'+event);  
      scaleY=1;
      this.transformShow='1,1';  
    }, 
    //是否是安卓平台
    _isAndriod() {
      return 'ios' == platform
    },
    
  },
  onShareAppMessage: function(res) {  
    let selfUid = JSON.parse(wx.getStorageSync('account'));    
    let age= this.userInfo.age!=''?`${this.userInfo.age}岁`:'';
    let city=  this.userInfo.city!=''?`家住${this.userInfo.city}。`:'。';
    let introduce=  this.userInfo.introduce!=''?`${this.userInfo.introduce}。`:'';
    let title = `${this.userInfo.nickname},${age}${city}来看看你们合不合得来！`;
    let path = `pages/common/login/main?selfUid=${selfUid.uuid}&userRuuid=${selfUid.uuid}`;  
    let imgLink = this.imgUrls[0].link;
    return this.onShareAppMessage(title,path);
  }, 
  //页面滚动
  onPageScroll: function(event) {
    if (event.scrollTop > 0 && PULL_DEFAULT != this.pullState) {
      //2 * this.scrollTop 两倍表示px转rpx，  所以这里必须进行单位转换
      if (this.dynamicHeight - scale * event.scrollTop < this.refreshHeight) {
        this.pullState = PULL_LT_HEIGHT
      } else {
        this.pullState = PULL_GT_HEIGHT
      }
    }
    this.scrollTop = event.scrollTop
  }, 

}
</script> 
 
<style lang="scss" scoped> 
.page-back-transform{ 
  animation:pageBack .4s;
  z-index:10;
}
@keyframes pageBack{
  0%   {transform:rotateZ(0deg);} 
  50%   {transform:translateY(-30px)}
  /*25%  {transform:rotateY(0deg);}*/
  /*50%  {transform:rotateY(0deg);}*/
  100% {transform:rotate(0deg);}
}
@-webkit-keyframes pageBack{
  0%   {transform:rotateZ(0deg);} 
  50%   {transform:translateY(-30px)}
  /*25%  {transform:rotateY(0deg);}*/
  /*50%  {transform:rotateY(0deg);}*/
  100% {transform:rotate(0deg);}
}
</style>
